<template>
  <view class="list-interflow-box">
    <u-sticky>
      <view class="detail-top" :style="{minHeight:bannerHeight - 5 +'px'}">
        <image @load="handleBannerImg" ref="bannerIng" class="detail-banner" mode="widthFix"
          src="@/static/interflow/bg3.png"></image>
        <view class="top-box">
          <image @click="handleBack" class="detail-back" :style="{marginTop:systemInfo.statusBarHeight+5+'px'}"
            mode="widthFix" src="@/static/interflow/back.png"></image>
          <view class="top-user mlr15">
            <view class="user-l">
              <image class="user-avtor" mode="widthFix" src="@/static/interflow/avtor.png"></image>
              <view class="l-msg">
                <view class="msg-name"><text>行业公知-吴虹鸥</text></view>
                <view class="msg-member"><text>江苏易达账号</text></view>
              </view>
            </view>
            <view class="user-r">
              <text>分享</text>
            </view>
          </view>
        </view>
      </view>
      <view class="detail-tab">
        <view class="tab-l">
          <text class="active">最新</text>
          <text class="l-mid">只看圈主</text>
          <view class="l-cont">
            <image class="tab-jh" mode="widthFix" src="@/static/interflow/bl-jh.png"></image>
            <text>精华</text>
          </view>
        </view>
        <view class="tab-r">
          <image @click="handleClickMember" class="tab-cd" mode="widthFix" src="@/static/interflow/bl-cd.png"></image>
        </view>
      </view>
    </u-sticky>
    <view class="detail-list">
      <view class="planet-box-content">
        <view class="planet-list" v-for="(item, index) in articleList" :key="index">
          <view class="list">
            <view class="list-ment">
              <view class="user-member">
                <image v-if="item.avatar" :src="item.avatar" />
                <image v-else src="@/static/interflow/avtor.png" />
                <view class="member-right">
                  <view class="right-name">
                    <text>{{ item.createName }}</text>
                  </view>
                  <view>
                    <text class="right-time">{{ item.createTime }}</text>
                  </view>
                </view>
              </view>
              <view class="user-essenceFlag">

                <!--  <img src="@/static/interflow/jh.svg" class="jh-img" v-if="item.essenceFlag" /> -->
                <!--     <img src="@/static/interflow/jh.svg" class="jh-img" v-if="item.essenceFlag" /> -->
                <view class="article-operate-box">
                  <view class="is-jh-box">
                    <image mode="heightFix" src="@/static/interflow/bl-jh.png"></image>
                    <text>精华</text>
                  </view>
                  <view class="operate-jh">
                    <text>设为精华</text>
                  </view>
                  <image mode="heightFix" @click="handleThemeEssenceShow(item, index)"
                    src="@/static/interflow/bl-slh.png" />

                </view>
              </view>
            </view>

            <view class="content-title">
              <text class="title-content">{{ item.title }}</text>
              <view class="introduce-box" :class="{ 'status-text': item.isStatus }"
                :style="{ height: item.isStatus ? item.textHeight : 'auto' }">
                <view class="check-more" @click="handleCheckMore(item, index)" v-if="item.isShowMore">
                  展开
                </view>
                <view class="introduce-content" ref="content" v-html="item.content"></view>
                <view class="check-more" @click="handleCheckMore(item, index)" v-if="
                          item.content &&
                            !item.isShowMore &&
                            item.content.length > 380
                        ">
                  收起
                </view>
              </view>
              <view class="content-bottom">
                <view class="bottom-l">
                  <view class="dz-box" style="margin-right:40px" @click.stop="handleLike(item, index)">
                    <image mode="heightFix" v-if="!item.likeFlag" src="@/static/interflow/dianzan.png" />
                    <image mode="heightFix" v-else src="@/static/interflow/dz-active.png" />
                    <span :style="{ color: item.likeFlag ? '#1890ff' : '#333333' }">{{ item.likeNumber }}</span>
                  </view>
                  <view class="dz-box" @click.stop="hanldleComment(item, index)">
                    <image mode="heightFix" src="@/static/interflow/xinx.png" /><text>{{
                            item.commentNumber
                          }}</text>
                  </view>
                </view>
                <view class="bottom-r" @click="hanldleComment(item, index)">
                  <span>查看详情</span>
                  <a-icon type="right" :style="{ fontSize: '14px', color: '#7a7979' }" />
                </view>
              </view>
            </view>
          </view>
        </view>

      </view>
    </view>
    <u-popup :show="ehemeEssenceShow" @close="handleThemeEssenceClose">
      <view class="eheme-essence-box">
        <view class="essence-content">
          <text>设为精华</text>
        </view>
        <view class="essence-content">
          <text>取消精华</text>
        </view>
        <view class="essence-content">
          <text style="color: #f11;">删除</text>
        </view>
        <view class="essence-content">
          <text style="color: #dedcdc;">取消</text>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    components: {

    },
    data() {
      return {
        tabContent: ["最新", "只看圈主", "精华"],
        currentIndex: 0,
        textHeight: "",
        isShowMore: false,
        isStatus: false,
        checkTitle: "展开",
        loading: false,
        infoLoading: false,
        userInfo: null,
        articleList: [{
            id: 1,
            avatar: "",
            createName: "张三",
            title: "标题",
            content: "内容",
            commentNumber: 15,
            likeNumber: 2,
            createTime: "2024-01-09 11:22:56"
          },
          {
            id: 2,
            avatar: "",
            createName: "张三",
            title: "标题",
            content: "内容",
            commentNumber: 15,
            likeNumber: 2,
            createTime: "2024-01-09 11:22:56"
          }
        ],
        pagination: {
          // 分页配置
          pageNo: 1,
          pageSize: 20,
          showQuickJumper: true,
          showSizeChanger: true,
          pageSizeOptions: ["20", "50", "100"],
          total: 0,
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条";
          }
        },
        starMaster: {
          name: "",
          introduction: ""
        },
        interflowData: [{
            id: "1-1",
            name: "我创建的圈子",
            children: []
          },
          {
            id: "2-1",
            name: "我加入的圈子",
            children: []
          }
        ],
        treeCurrent: 0,
        selectedKeys: [],
        selectedObj: null,
        articleParams: {},
        essenceMount: 0,
        type: "",
        jumpType: "",
        tips: "",
        defaultOpenKeys: [],
        operateBtn: false,
        userTop: "",
        userleft: "",
        groupId: "",
        createByGroupId: "",
        interflowDataMap: {},
        selectedArticleIndex: null,
        interflowInfo: {},
        bgHeight: 50,
        // defaultBanner: require("@/static/interflow/bg3"),
        moderatorAuthority: {
          moderatorFlag: false,
          adminFlag: false
        },

        moderatorMember: {
          moderator: [],
          admin: [],
          member: []
        },
        selectUser: null,
        ehemeEssenceShow: false,
        selectEhemeEssence: null,
        selectEhemeEssenceIndex: null,
        operaeTitle: "设为管理员",
        systemInfo: {
          statusBarHeight: ""
        },
        bannerHeight: ""
      };
    },

    created() {


    },

    onLoad() {
      this.getHeight()
    },
    async onShow() {

    },
    async mounted() {

    },

    methods: {
      getHeight() {
        uni.getSystemInfo({
          success: res => {
            this.systemInfo = res
            console.log(this.systemInfo, " this.systemInfo")
          }
        });
      },
      handleBannerImg(e) {
        this.bannerHeight = e.detail.height;
      },
      //获取我创建的圈子与我加入的圈子
      getInterflowList() {
        let data = {
          order: "ASC",
          orderBy: "sort",
          params: {}
        };
        postAction("/b/chatBoard/group/queryMyList", data).then(res => {
          if (res.data.success) {
            // 我创建的
            let createData = res.data.data.filter(item => {
              return item.createBy == this.userInfo.userId;
            });
            let joinData = res.data.data.filter(item => {
              return item.createBy !== this.userInfo.userId;
            });
            const map = {};
            res.data.data.forEach(s => (map[s.id] = s));
            this.interflowDataMap = map;
            //我参与的
            this.interflowData[0].children = createData;
            this.interflowData[1].children = joinData;
          }
        });
      },

      //获取圈子列表
      getArticleList() {
        //获取默认圈子列表
        this.loading = true;
        this.articleParams.groupId = this.groupId;
        postAction("/b/chatBoard/article/queryList", {
          order: "DESC",
          orderBy: "createTime",
          pageNo: 1,
          pageSize: 20,
          params: this.articleParams
        }).then(res => {
          this.articleList = res.data.data;
          this.articleList.forEach((item, index) => {
            if (item.avatar) {
              item.avatar = process.env.BASE_API + "/image" + item.avatar;
            }
            if (item.content && item.content.length > 380) {
              item.textHeight = "80px";
              item.isShowMore = true;
              item.isStatus = true;
            }
          });
          this.pagination.total = res.data.total;
          this.loading = false;
        });
      },

      //获取圈子信息
      getInterflowInfo() {
        this.infoLoading = true;
        getAction(`/b/chatBoard/group/getInfo/${this.groupId}`).then(res => {
          if (res.data.success) {
            this.interflowInfo = res.data.data;
            if (this.interflowInfo && this.interflowInfo.banner) {
              this.interflowInfo.banner =
                process.env.BASE_API + "/image" + this.interflowInfo.banner;
            }
            this.loadBannerBg();
          }
        });
      },

      loadBannerBg() {
        this.infoLoading = false;
        this.bgHeight = this.$refs.bgInter.offsetHeight - 40;
      },

      //明细-登录人权限等
      getInterflowDetail() {
        getAction(`/b/chatBoard/group/getDetail/${this.groupId}`).then(res => {
          if (res.data.success) {
            this.moderatorAuthority = res.data.data;
          }
        });
      },

      //点击圈子
      onSelect(info) {
        if (info.selectedKeys == '1-1' || info.selectedKeys == '2-1') {
          return
        }
        this.selectedKeys = info.selectedKeys;
        this.groupId = info.key;
        this.getArticleList();
        this.getInterflowInfo();
        this.getInterflowDetail();
        this.getEssence();
        this.getMemberList();
      },

      //切换最新/精华/只看圈主
      handleTab(item, index) {
        this.currentIndex = index;
        if (item == "最新") {
          this.articleParams.hostFlag = "";
          this.articleParams.essenceFlag = "";
        } else if (item == "只看圈主") {
          this.articleParams.hostFlag = true;
          this.articleParams.essenceFlag = "";
          this.pagination.pageNo = 1;
          this.pagination.pageSize = 20;
        } else if (item == "精华") {
          this.articleParams.essenceFlag = true;
          this.articleParams.hostFlag = "";
        }
        this.getArticleList();
      },

      //发表主题
      handlePublish() {
        this.$refs.editTheme.open(this.selectedKeys[0]);
      },

      //发表成功
      handlePublishSucss() {
        this.pagination.pageNo = 1;
        this.pagination.pageSize = 20;
        this.getArticleList();
      },

      handleThemeEssenceShow(item, index) {
        // item.ehemeEssenceShow = true;
        this.ehemeEssenceShow = true
        this.selectEhemeEssence = item
        // this.selectEhemeEssenceIndex = index;
        // this.$set(this.articleList, index, item);
      },

      handleThemeEssenceClose(item, index) {
        // item.ehemeEssenceShow = false;
        this.ehemeEssenceShow = false
        // this.$set(this.articleList, index, item);
      },

      handleThemeEssencOpen(item) {
        debugger
        console.log(item)
      },

      //设为精华
      handleThemeEssence(row) {
        let flag = !row.essenceFlag;
        getAction(
          `/b/chatBoard/article/updateEssenceFlag/${row.id}/${flag}`
        ).then(res => {
          if (res.data.success) {
            this.$message.success("操作成功！");
            this.getArticleList();
          }
        });
      },

      //删除帖子
      handleThemeEssenceDelete(row) {
        deleteAction(`/b/chatBoard/article/${row.id}`).then(res => {
          if (res.data.success) {
            this.$message.success("删除成功！");
            this.getArticleList();
          }
        });
      },

      handleCommonClose() {
        this.selectEhemeEssence.ehemeEssenceShow = false;
        this.$set(this.articleList, this.selectEhemeEssenceIndex, this.selectEhemeEssence);
        this.ehemeEssenceShow = false
      },

      //查看详情
      hanldleComment(item, index) {
        this.selectedArticleIndex = index;
        uni.navigateTo({
          url: '/pages/home/detail?id=' + item.id
        });
        // this.$refs.comment.open(item, this.userInfo);
      },

      //点赞
      handleLike(item, index) {
        if (!item.likeFlag) {
          //用户点赞
          getAction(`/b/chatBoard/like/pick/${item.id}`).then(res => {
            if (res.data.success) {
              item.likeNumber++;
              item.likeFlag = true;
              this.$set(this.articleList, index, item);
            }
          });
        } else {
          // 取消点赞
          deleteAction(`/b/chatBoard/like/disPick/${item.id}`).then(res => {
            if (res.data.success) {
              item.likeNumber--;
              item.likeFlag = false;
              this.$set(this.articleList, index, item);
            }
          });
        }
      },

      //更新点赞数据
      handleLikeSuccess(item) {
        this.$set(this.articleList, this.selectedArticleIndex, item);
      },

      //查询推荐数
      getEssence() {
        getAction(`/b/chatBoard/article/getEssenceCount/${this.groupId}`).then(
          res => {
            if (res.data.success) {
              this.essenceMount = res.data.data;
            }
          }
        );
      },

      //版聊设置
      handleSetUp(row) {
        this.$refs.editSetUp.edit(this.interflowInfo);
      },

      //设置成功
      handleEditSetUpSuccess() {
        this.getInterflowList();
        this.getInterflowInfo();
        this.getInterflowDetail();
      },

      //获取成员
      getMemberList() {
        getAction(`/b/chatBoard/member/queryList/${this.groupId}`).then(res => {
          if (res.data.data) {
            let moderator = [], //圈主
              admin = [], //管理员
              member = []; //版聊人员
            //圈主
            res.data.data.forEach(item => {
              if (item.moderatorFlag) {
                moderator.push(item);
              }
              if (item.adminFlag) {
                admin.push(item);
              }
              if (!item.adminFlag && !item.moderatorFlag) {
                member.push(item);
              }
              if (item.avatar) {
                item.avatar = process.env.BASE_API + "/image" + item.avatar;
              }
            });
            this.moderatorMember.moderator = moderator;
            this.moderatorMember.admin = admin;
            this.moderatorMember.member = member;
          }
          console.log(res, "memberId");
        });
      },

      //设置人员
      handleSetUser(item) {
        if (
          (this.moderatorAuthority.moderatorFlag ||
            this.moderatorAuthority.adminFlag) &&
          item.memberId !== this.userInfo.userId
        ) {
          if (item.adminFlag) {
            this.operaeTitle = "取消管理员";
          } else {
            this.operaeTitle = "设为管理员";
          }
          this.selectUser = item;
          let clientRect = this.$refs[
            `user${item.id}`
          ][0].getBoundingClientRect();
          this.userTop = clientRect.top + 30 + "px";
          this.userleft = clientRect.left + 20 + "px";
          this.operateBtn = true;
        }
      },

      // 更新管理员
      handleAdminUser() {
        let flag;
        if (this.selectUser.adminFlag) {
          flag = false;
        } else {
          flag = true;
        }
        getAction(
          `/b/chatBoard/member/updateAdminFlag/${this.selectUser.id}/${flag}`
        ).then(res => {
          if (res.data.success) {
            this.$message.success("操作成功！");
            this.operateBtn = false;
            this.getMemberList();
          }
        });
      },

      //剔除成员
      handleDeleteUser() {
        deleteAction(`/b/chatBoard/member/${this.selectUser.id}`).then(res => {
          if (res.data.success) {
            this.$message.success("剔除成员成功！");
            this.operateBtn = false;
            this.getMemberList();
          }
        });
      },

      handleCloseOperate() {
        this.operateBtn = false;
        this.userTop = "";
        this.userleft = "";
      },

      handleCheckMore(item, index) {
        item.isShowMore = !item.isShowMore;
        item.isStatus = !item.isStatus;
        this.$set(this.articleList, index, item);
      },

      handleJumpEssence() {
        let url =
          window.location.origin +
          `/#/interflow-planet/essence?groupId=${this.groupId}`;
        window.open(url, "_blank");
      },

      handleTableChange(pageNo, pageSize) {
        this.pagination.pageNo = pageNo;
        this.pagination.pageSize = pageSize;
        this.getArticleList();
      },
      handleClickMember() {
        uni.navigateTo({
          url: '/pages/home/member?id=' + 1
        });
      },
      handleBack() {
        uni.navigateBack({
          delta: 1
        });
      }
    },
  };
</script>

<style lang="scss">
  .list-interflow-box {
    background: #f6f7f9;
    min-height: 100vh;
    width: 100vw;

    .detail-top {
      position: relative;
      overflow: hidden;

      .detail-banner {
        width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
      }

      .top-box {
        z-index: 3;
        position: relative;

        .detail-back {
          width: 23px;
          margin-left: 15px;
        }

        .top-user {
          display: flex;
          justify-content: space-between;
          margin-top: 20px;
          align-items: center;
          padding-bottom: 20px;

          .user-l {
            display: flex;
            align-items: center;

            .user-avtor {
              width: 80px;
              height: 80px;
              border-radius: 5px;
            }

            .l-msg {
              margin-left: 15px;
            }

            .msg-name {
              margin-bottom: 10px;

              text {
                font-size: 40rpx;
                color: #fff;
                font-weight: 700;
              }

            }

            .msg-member {
              text {
                color: #fff;
              }
            }
          }

          .user-r {
            background: rgba(219, 220, 216, 0.6);
            border-radius: 20px;
            height: 30px;
            line-height: 30px;
            width: 60px;
            text-align: center;

            text {
              color: #fff;
            }
          }
        }
      }
    }

    .detail-tab {
      background: #fff;
      display: flex;
      justify-content: space-between;
      padding: 10px 15px;
      align-items: center;

      .tab-l {
        display: flex;

        .active {
          color: #fff;
          background-color: #ea5115;
        }

        text {
          font-size: 32rpx;
          padding: 5px 10px;
          border-radius: 20px;
        }

        .l-cont {
          display: flex;
          align-items: center;

          .tab-jh {
            width: 15px;
            margin-right: 3px;
          }
        }

        .l-mid {
          margin-left: 20px;
          margin-right: 20px;
        }
      }

      .tab-r {
        .tab-cd {
          width: 20px;
        }
      }
    }

    .planet-box-content {
      border-radius: 5px;
    }

    .planet-box-content {
      height: calc(100vh - 260px);
      overflow: auto;
      margin-top: 10px;

      .planet-list {
        padding: 15px 15px 0 15px;
        background: #fff;
        border-radius: 5px;
      }

      .list {
        border-bottom: 1px solid #dedcdc;
        padding-bottom: 15px;
      }

      .list-ment {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .jh-img {
          height: 45px;
          margin-right: 10px;
        }

        .user-essenceFlag {
          display: flex;
          align-items: center;

          .is-jh-box {
            display: flex;
            align-items: center;
            background: rgba(234, 81, 21, 0.1);
            padding: 3px 5px;
            border-radius: 20px;

            text {
              color: #ea5115;
              font-size: 12px;
            }

            image {
              height: 10px;
              margin-right: 3px;
            }
          }
        }
      }

      .dz-box {
        display: flex;
        align-items: center;

        text {
          margin-left: 2px;
        }
      }

      .user-member {
        display: flex;
        align-items: center;

        image {
          width: 50px;
          height: 50px;
          margin-right: 10px;
        }

        h4 {
          font-size: 16px;
        }

        p,
        i {
          color: #7a7979;
        }

        i {
          font-size: 15px;
        }

        p {
          margin-top: 10px;
        }
      }

      .content-title {
        margin-left: 60px;

        .title-content {
          font-size: 32rpx;
          font-weight: 700;
          margin-top: 10px;
          margin-bottom: 5px;
        }
      }

      .status-text {
        display: -webkit-box;
        display: -ms-flexbox;
        -webkit-line-clamp: 4;
        /* 控制显示的行数 */
        -webkit-box-orient: vertical;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;

        &::before {
          content: "";
          float: right;
          height: 100%;
          margin-bottom: -17px;
        }
      }

      .introduce-box {
        .check-more {
          float: right;
          clear: both;
          margin-right: 10px;
          color: #2570fd;
          cursor: pointer;
          z-index: 999;
        }
      }

      .content-bottom {
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        align-items: center;
        cursor: pointer;

        .bottom-l {
          display: flex;
          align-items: center;
        }

        span {
          color: #7a7979;
        }

        image {
          height: 20px;

        }

        .bottom-r {
          align-items: center;
        }
      }

      .member-right {
        .right-name {
          color: #f96d44;
          font-size: 32rpx;
          margin-bottom: 5px;
        }

        .right-time {
          color: #cdcaca;
        }
      }
    }

    .article-operate-box {
      display: flex;
      align-items: center;

      .operate-jh {
        line-height: 20px;
        padding: 0 5px;

        text {
          font-size: 10px;
          color: #ea5115;
        }

        background: rgba(219, 220, 216, 0.6);
      }

      image {
        height: 20px;
        margin-left: 5px;
      }


    }

    .eheme-essence-box {
      padding: 20px;

      .essence-content {
        text-align: center;
        padding: 10px;
      }
    }
  }

  .status {
    position: fixed;
    background: #f11;
    top: 0;
    z-index: 99;
    height: 0px;
    width: 100%;
    height: var(--status-bar-height);
  }
</style>